import CreateDisciplineForm from "@/features/create-discipline/ui/CreateDisciplineForm"
import { Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react"
import { Gltf, Html } from "@react-three/drei"
import { GroupProps } from "@react-three/fiber"
import { Select } from "@react-three/postprocessing"
import { usePathname, useRouter } from "next/navigation"
import { useState } from "react"
import ThemeModal from "./ThemeModal"


export default function Theme(props: GroupProps & { tittle: string, themeId: number }) {
    const source = '/assets/machine.glb'
    const router = useRouter()
    const pathname = usePathname()
    const { isOpen, onOpenChange, onOpen } = useDisclosure()

    return (
        <group {...props}>
            <mesh>
                <Gltf src={source} />
                <Html position={[-0.5, 2.3, 1.7]} className='' distanceFactor={10}>
                    {!isOpen &&
                        <div
                            onClick={onOpen}
                            className='rounded-full z-10 cursor-pointer font-bold text-xl bg-white p-6 border-gray-300 border-8 hover:bg-gray-200'
                        >
                            {props.tittle}
                        </div>
                    }
                    <Modal
                        className='fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-0 h-fit bg-white p-5 rounded-lg'
                        isOpen={isOpen}
                        onOpenChange={onOpenChange}
                    >
                        <ModalContent className='w-1/2'>
                            {(onClose) => (
                                <>
                                    <ModalBody className='p-5 items-center'>
                                        <div className='w-full ' >
                                            <ThemeModal
                                                tittle={props.tittle}
                                                description="Описание темы!"
                                                onBegin={() => {
                                                    router.push(`${pathname}/theme/${props.themeId}`)
                                                }}
                                            />
                                        </div>
                                    </ModalBody>
                                </>
                            )}
                        </ModalContent>
                    </Modal>
                </Html>
            </mesh>
        </group>
    )
}